<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> 
         <el-form-item label="Label" prop="dictLabel">
            <el-input
               v-model="queryParams.dictLabel"
               placeholder="please input Label"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
 
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">Search</el-button>
            <el-button icon="Refresh" @click="resetQuery">Reset</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
			   v-hasPermi="['dictData:edit']"
            >Add</el-button>
         </el-col> 
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Close"
               @click="handleClose"
            >Close</el-button>
         </el-col> 
      </el-row>

      <el-table v-loading="loading" :data="dataList" >
          <el-table-column label="id" align="center" prop="id" />
         <el-table-column label="label" align="center" prop="dictLabel">
            <template #default="scope">
                <el-tag :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="desc" align="center" prop="dictDesc" />  
         <el-table-column  v-if='showAddtion'  label="L+" align="center" prop="weight1" />  
         <el-table-column v-if='showAddtion'  label="W+" align="center" prop="weight2" />   		 
         <el-table-column label="order" align="center" prop="dictSort" />          
         <el-table-column label="Time Created" align="center" prop="createTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="Operation" align="center" width="200"  v-hasPermi="['dictData:edit']" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary"   icon="Edit" @click="handleUpdate(scope.row)"  >Edit</el-button>
               <el-button link type="primary"  icon="Delete" @click="handleDelete(scope.row)" >Remove</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
         style="float: right"
      />

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body  draggable>
         <el-form ref="dataRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="Dictory Type">
               <el-input v-model="form.dictType" :disabled="true" />
            </el-form-item>
            <el-form-item label="Label" prop="dictLabel"  label-width="120px">
               <el-input v-model="form.dictLabel" placeholder="label" />
            </el-form-item>
			
            <el-form-item v-if='showAddtion' label="L+" prop="weight1"  label-width="120px">
               <el-input-number v-model="form.weight1"  :precision="1" :step="0.1"  placeholder="" />
            </el-form-item>
            <el-form-item   v-if='showAddtion'  label="W+" prop="weight2"  label-width="120px">
               <el-input-number v-model="form.weight2"   :precision="1" :step="0.1" placeholder="" />
            </el-form-item>		
			
            <!-- <el-form-item label="Dictory Value" prop="dictValue">
               <el-input v-model="form.dictValue" placeholder="value" :min="0"/>
            </el-form-item> -->
         
            <!-- <el-form-item label="样式属性" prop="cssClass">
               <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
            </el-form-item> -->
            <el-form-item label="Dictory Order" label-width="120px" prop="dictSort">
               <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
            </el-form-item>
       
            <!-- <el-form-item label="回显样式" prop="listClass">
               <el-select v-model="form.listClass">
                  <el-option
                     v-for="item in listClassOptions"
                     :key="item.value"
                     :label="item.label + '(' + item.value + ')'"
                     :value="item.value"
                  ></el-option>
               </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="状态" prop="status">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item> -->
            <el-form-item label="Desc" prop="desc">
               <el-input v-model="form.dictDesc" type="textarea"  ></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">Confirm</el-button>
               <el-button @click="cancel">Cancel</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="Data">  
import service from '@/utils/request'   
import useDictStore from '@/store/modules/dict'
import { ref, getCurrentInstance, reactive,toRefs  } from "vue";
import { useRoute } from 'vue-router' 
const { proxy } = getCurrentInstance(); 
const dataList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);  
const total = ref(0);
const title = ref("");
const defaultDictType = ref(""); 
const route = useRoute(); 

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    dictId: route.query.dictId,
    dictType: undefined,
    dictLabel: undefined,
    status: undefined
  },
  rules: {
    dictLabel: [{ required: true, message: "Dictory Label cann't be blank", trigger: "blur" }],
   //  dictValue: [{ required: true, message: "Dictory Value cann't be blank", trigger: "blur" }],
    dictSort: [{ required: true, message: "Sort can't be null", trigger: "blur" }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询字典类型详细 */
function getTypes(dictType) {  
   queryParams.value.dictType = dictType;
   service.get('shipping/sysDictType/' + dictType).then(
      response =>{ 
         queryParams.value.dictType = response.data.dictType;
      }
   ) 
   //console.log(route.query.dictType)
   //queryParams.value.dictType = route.query.dictType
   getList()
}  

let showAddition = ref(false)


/** 查询字典数据列表 */
function getList() {
  loading.value = true; 
  service.get('shipping/dict/data/getTable', {params: queryParams.value}).then(response => {
    dataList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    dictLabel: undefined,
    dictValue: undefined,
    feature1: undefined,
    feature2: undefined,
    weight: undefined,
    dictSort: 0, 
    remark: undefined
  };
  proxy.resetForm("dataRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 返回按钮操作 */
function handleClose() {
  const obj = { path: "/basicData/dict" };
  proxy.$tab.closeOpenPage(obj);
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.dictType = defaultDictType.value;
  handleQuery();
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "Add Data";
  form.value.dictType = queryParams.value.dictType;
}
 
/** 修改按钮操作 */
function handleUpdate(row) {
  reset(); 
  form.value = row; 
  open.value = true;
  title.value = "Update Data"; 
  form.value.dictType = queryParams.value.dictType;
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["dataRef"].validate(valid => {
    if (valid) {
      form.value.dictId = route.query.dictId
      form.value.dictType = route.query.dictType
      if (form.value.id != undefined) {
         service.put('/shipping/dict/data',form.value).then(response => {  
         useDictStore().removeDict(form.value.dictType);
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        service.post('/shipping/dict/data',form.value).then(response => {
         useDictStore().removeDict(form.value.dictType);
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) { 
  proxy.$modal.confirm('是否确认删除字典编码为"' + row.id + '"的数据项？').then(function() {
    return service.delete(`/shipping/dict/data/`+row.id );
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
    useDictStore().removeDict(queryParams.value.dictType);
  }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("shipping/dict/data/export", {
    ...queryParams.value
  }, `dict_data_${new Date().getTime()}.xlsx`);
}

let showAddtion =  route.query.dictType=="Passenger_Car" ||route.query.dictType=="HH_Wheel" ||route.query.dictType=="HH_Crawler" ||route.query.dictType=="Breakbulk" 
getTypes(route.query && route.query.dictType);
</script>